<template>
	<view class="page participant">
		<view><banner-ad></banner-ad></view>
		<view class="padding30">
			<view class="color-white margin-top30 f14 text-center">共 {{ total }} 位用户</view>
			<view class="margin-top30 padding30 border-radius10" style="background-color: #6226e0;">
				<block v-for="(item, index) in list" :key="index">
					<image :src="item.photo" mode="aspectFill" class="avatar" :class="{ 'margin-left10': index % 7 != 0 }"></image>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
let gData = {};
let _self;
export default {
	components: {},
	data() {
		return {
			prizeId:null,
			list: [],
			total: 0,
			status: 'more',
			contentText: {
				contentdown: '点击加载',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		};
	},
	onLoad(options) {
		_self = this;
		this.prizeId=options.prizeId||null
		this.initList();
	},
	onUnload() {
		gData = {}; /*因为全局变量会保存，再次打开该页面时会造成一些数据错误 */
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.initList();
		uni.stopPullDownRefresh();
	},
	// 上拉加载
	onReachBottom() {
		this.loadList();
	},
	computed: {
		...mapGetters('draw', ['_participantList'])
	},
	methods: {
		// 初始化列表
		initList() {
			gData.page = 0;
			this.list = [];
			this.status = 'more';
			this.loadList();
		},
		// 加载列表
		async loadList() {
			if (this.status == 'more') {
				const page = gData.page + 1;
				this.status = 'loading';
				const pageSize = 105;
				// uni.showNavigationBarLoading();
				try {
					let data = await this.$api.draw.getDrawUserList({
						prizeId: this.prizeId,
						page: page, // 页数
						rows: pageSize //
					});
					console.log(data);

					const addList = data.list || [];
					this.list = this.list.concat(addList);
					gData.page = page;
					this.total = data.total;
					const noMore = page * pageSize >= data.total;
					this.status = noMore ? 'noMore' : 'more';
					// uni.hideNavigationBarLoading()
				} catch (e) {
					this.status = 'more';
					console.log('request fail', e);
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.participant {
	background-color: #581ae1;
	color: #555555;
	font-size: 32rpx;

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
	}
}
</style>
